<template>
    <div>
            员工姓名<input type="text" v-model="pages.Yname">
            角色<select v-model="pages.Ylxid">
                <option v-for="d in xl" :value="d.Jid">{{d.Jname}}</option>
            </select>
            <input type="button" value="查询" @click="xianshi">
            <input type="button" value="逻辑删除" @click="shanhcu">
            <input type="button" value="逻辑修改" @click="update">
            <input type="button" value="新增员工" @click="xz">
            <table class="table">
                 <thead>
                      <tr>
                          <td><input type="checkbox" v-model="shus" @change="Quan"></td>
                          <td>头像</td>
                          <td>员工姓名</td>
                          <td>员工编号</td>
                          <td>联系方式</td>
                          <td>角色</td>
                          <td>登录密码</td>
                          <td>状态</td>
                          <td>备注</td>
                      </tr>
                 </thead>
                 <tbody>
                       <tr v-for="d in data">
                          <td><input type="checkbox" v-model="sc" :value="d.Yid"></td>
                          <td><img :src="'https://localhost:7059/' + d.Ytp" style="width: 60px; height: 60px;" ></td>
                          <td>{{d.Yname}}</td>
                          <td>{{d.Ybh}}</td>
                          <td>{{d.Yphone}}</td>
                          <td>{{d.Jname}}</td>
                          <td>{{d.Ymm}}</td>
                          <td>
                            <span v-if=" d.Yzt == 0">启用</span>
                            <span v-if=" d.Yzt == 1">禁用</span>
                          </td>
                          <td>{{d.Ybz}}</td>
                      </tr>
                 </tbody>
            </table>

            一共{{pagedata.count}}条  一页{{pages.size}}条   一共{{pagedata.pagecount}}页  当前第{{pages.index}}页
            <br>
            <input type="button" value="首页" @click="Fenye(1)">

            <input type="button" value="上一页" @click="Fenye(2)">

            <input type="button" v-for="d in pagedata.pagecount" :value="d" @click="shuzi(d)">

            <input type="button" value="下一页" @click="Fenye(3)">

            <input type="button" value="尾页" @click="Fenye(4)">

            <input type="number" v-model="pages.index"><input type="button" value="跳转" @click="tiao()">

            <select v-model="pages.size" @click="tiao1()">
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="8">8</option>
            </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import {ref,onMounted, pushScopeId} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const data = ref([{
      "Yid": 3,
      "Ytp": "/img/2025-49-142.jpg",
      "Yname": "郭富豪",
      "Ybh": "20250714093",
      "Yphone": "13526230146",
      "Ylxid": 1,
      "Ymm": "123456",
      "Yzt": 0,
      "Ybz": "工作经验丰富",
      "IsDelete": false,
      "Jid": 1,
      "Jname": "管理员"
}])

const xz = ()=>{
  router.push("/Add/");
}

const Fenye=(val:any)=>{
     if(val==1){
         pages.value.index = 1
     }
     if(val==2){
        if(pages.value.index>1){
            pages.value.index-=1
        }
     }
     if(val==3){
        if(pages.value.index<pagedata.value.pagecount){
            pages.value.index+=1
        }
     }
     if(val==4){
        pages.value.index = pagedata.value.pagecount
     }
     xianshi()
}

const shuzi=(val:any)=>{
    pages.value.index = val
    xianshi()
}

const tiao=()=>{
    if(pages.value.index>0 && pages.value.index<pagedata.value.pagecount){
        
    }
    xianshi()
}

const tiao1=()=>{
    pages.value.index = 1
     xianshi()
}

const pages = ref({
    "Yname":"",
    "Ylxid":"",
    index:1,
    size:5
})

const pagedata = ref({
    count:0,
    pagecount:0
})

const xianshi=()=>{
    axios.get("https://localhost:7059/api/YK/Show",{params:pages.value}).then(res=>{
        data.value = res.data.get

        pagedata.value.count = res.data.count
        pagedata.value.pagecount = Math.ceil(pagedata.value.count/pages.value.size)
    })
}

const shus=ref(false)

const Quan=()=>{
    if(shus.value){

        sc.value=[]
        data.value.forEach(res=>{
            sc.value.push(res.Yid)
        })

    }
    else{
        sc.value=[]
    }
}

const sc = ref([])

const shanhcu =()=>{
   confirm("您确定要删除吗?")
   {
     axios.get("https://localhost:7059/api/YK/Delete",{params:{idstring:sc.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('删除成功!');
            xianshi()
        }
        else{
            alert('删除失败!');
        }
    })
   }
}

const hhh = [
    {Yid:0,Yzt:"启用"},
    {Yid:1,Yzt:"禁用"}
]

const update=()=>{
    axios.get("https://localhost:7059/api/YK/Update",{params:{idstring:sc.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("修改状态成功!");
            xianshi()
        }
        else{
            alert("修改状态失败!");
        }
    })
}

onMounted(()=>{
  Bang()
  xianshi()
})

const xl = ref([{
     "Jid": 1,
    "Jname": "管理员"
}])

const Bang=()=>{
    axios.get("https://localhost:7059/api/YK/Bang").then(res=>{
        xl.value = res.data
    })
}
</script>

<style scoped>

</style>